export default class CustomDraw {
  constructor(drawType) {
    this._map = window.map;
    this._draw = window.draw;
    this.drawType = drawType || "single"; // 默认单图形模式，即新画出新图形时清除之前画的图形
    if (this.drawType === "view") {
      // view 仅查看模式，禁止编辑
      this.enableEdit(false);
    } else {
      this.enableEdit(true);
    }
  }

  initListener(cb) {
    let _this = this;
    // 清除之前的监听
    if (this._map._listeners["draw.create"]) {
      this._map._listeners["draw.create"] = undefined;
    }
    if (this._map._listeners["draw.update"]) {
      this._map._listeners["draw.update"] = undefined;
    }
    if (this._map._listeners["draw.delete"]) {
      this._map._listeners["draw.delete"] = undefined;
    }
    // 重新初始化监听
    this._map.on("draw.create", function (e) {
      console.log("draw.create");
      if (typeof cb === "function") cb(e.features);
      // 清除之前画出的图形
      let thisId = e.features[0].id;
      _this.singleClear(thisId);
    });
    this._map.on("draw.update", (e) => {
      console.log("draw.update");
      if (typeof cb === "function") cb(e.features);
    });
    this._map.on("draw.delete", (e) => {
      console.log("draw.delete");
      if (typeof cb === "function") cb(e.features);
    });
  }

  // 进入矩形模式
  addRectangle(cb) {
    this._draw.changeMode("draw_rectangle", {
      // The id of the LineString to continue drawing
      featureId: "",
      // The point to continue drawing from
      from: [],
    });
    this.initListener(cb); // 创建监听，画完后获取图形的geojson数据
  }

  // 进入圆形模式。使用时是点击一下在地图上画一个默认半径的圆，选中后可以点边缘调整半径和中心点，如果发现点了一下什么都没发生的样子，可能只是你的地图zoom比较小，圆的半径太小了所以看不到
  addCircle(cb) {
    let scale = this.getScale();
    this._draw.changeMode("draw_circle", { initialRadiusInKm: scale / 1000 });
    this.initListener(cb);
  }

  // 进入自由多边形模式
  addPolygon(cb) {
    this._draw.changeMode("draw_polygon", {
      // The id of the LineString to continue drawing
      featureId: "",
      // The point to continue drawing from
      from: [],
    });
    this.initListener(cb);
  }

  // 外部传入geojson并添加到地图上
  addGeoJson(json, cb) {
    let featureIds = [];
    if (Array.isArray(json)) {
      json.forEach((item) => {
        featureIds = featureIds.concat(this._draw.add(item));
      });
    } else {
      featureIds = this._draw.add(json);
    }
    this.singleClear(featureIds);
    this.initListener(cb);
  }

  stopDraw() {
    this._draw.changeMode("simple_select", {
      featureIds: [],
    });
  }

  // 控制是否可编辑
  enableEdit(enable) {
    if (enable) {
      this._draw.changeMode("simple_select", {
        featureIds: [],
      });
      this.drawType = "single";
    } else {
      this._draw.changeMode("static");
      this.drawType = "view";
    }
  }

  // 单图形模式画完一个要清除之前画出来的图形
  singleClear(thisIds) {
    if (this.drawType === "single") {
      let all = this._draw.getAll();
      all.features.forEach((feature) => {
        if (thisIds.indexOf(feature.id) === -1) {
          this._draw.delete([feature.id]);
        }
      });
    }
  }

  clearAll() {
    this._draw.deleteAll();
  }
  getScale() {
    let scale;
    // let metersPerPixel = window.map.getProjection().getMetersPerPixelAtLatitude(window.map1.getCenter()); // 这个是参考例子给的方法但我使用时报错且解决不了
    let metersPerPixel = 1;
    let zoom = window.map.getZoom();
    switch (Math.round(zoom)) {
      case 2:
        scale = 1000000 / metersPerPixel;
        break;
      case 3:
        scale = 500000 / metersPerPixel;
        break;
      case 4:
        scale = 200000 / metersPerPixel;
        break;
      case 5:
        scale = 100000 / metersPerPixel;
        break;
      case 6:
        scale = 50000 / metersPerPixel;
        break;
      case 7:
        scale = 20000 / metersPerPixel;
        break;
      case 8:
        scale = 10000 / metersPerPixel;
        break;
      case 9:
        scale = 5000 / metersPerPixel;
        break;
      case 10:
        scale = 2000 / metersPerPixel;
        break;
      case 11:
        scale = 1000 / metersPerPixel;
        break;
      case 12:
        scale = 500 / metersPerPixel;
        break;
      case 13:
        scale = 200 / metersPerPixel;
        break;
      case 14:
        scale = 100 / metersPerPixel;
        break;
      case 15:
        scale = 50 / metersPerPixel;
        break;
      case 16:
        scale = 20 / metersPerPixel;
        break;
      case 17:
        scale = 10 / metersPerPixel;
        break;
      case 18:
        scale = 5 / metersPerPixel;
        break;
      default:
        break;
    }
    return scale;
  }
}
